<script setup>
import { getCategoryApi } from '@/api/category';
import { onMounted, ref } from 'vue';
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import addOrUpdate from './componets/addOrUpdate.vue'
import deleteById from './componets/delete.vue'

const addOrUpdateRef = ref(null)
const deleteRef = ref(null)
const categoryList = ref([])


const handleDelete=(row) => {
  deleteRef.value.deleteById(row.id) 
}
const handleUpdate=(row) => {
  addOrUpdateRef.value.dialogFormVisible=true
  addOrUpdateRef.value.title = '修改分类'
  addOrUpdateRef.value.categoryForm=JSON.parse(JSON.stringify(row))
  addOrUpdateRef.value.status=true
}
const add = () => {
  addOrUpdateRef.value.dialogFormVisible=true
  addOrUpdateRef.value.title = '添加分类'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.status=false
}
const getCategoryList =async () => {
  const res = await getCategoryApi()
  categoryList.value = res.data
}


onMounted(()=>{
  getCategoryList()
})
</script>

<template>
    <div class="category-header">
      <h2>商品分类管理</h2>
      <el-button type="primary" @click="add" class="add-button">
        <el-icon><Plus /></el-icon>
        添加分类
      </el-button>
    </div>
   <el-table
      :data="categoryList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
      :row-style="{ height: '50px' }"
      :cell-style="{ padding: '5px' }"
    >
      <el-table-column type="index" label="序号" sortable width="80" align="center" />
      <el-table-column prop="name" label="商品类别" sortable />
      <el-table-column prop="createBy" label="创建人" sortable />
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column prop="updateTime" label="修改时间" sortable />
      <el-table-column label="操作" width="150" align="center">
      <template #default="scope">
        <div class="action-buttons">
          <el-button type="primary" @click="handleUpdate(scope.row)" :icon="Edit" size="small" circle />
          <el-button type="danger" @click="handleDelete(scope.row)" :icon="Delete" size="small" circle />
        </div>
      </template>
    </el-table-column>
    </el-table>
    <addOrUpdate ref="addOrUpdateRef" @refresh="getCategoryList"/>
    <deleteById ref="deleteRef" @refresh="getCategoryList"/>
</template>

<style scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: linear-gradient(90deg, #409eff, #1a73e8);
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.category-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.add-button {
  background-color: #fff;
  color: #409eff;
  border: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.add-button:hover {
  background-color: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.add-button .el-icon {
  margin-right: 5px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-table__header th) {
  background-color: #f5f7fa !important;
}

:deep(.el-table__row:hover) {
  background-color: #f0f8ff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .category-header h2 {
    font-size: 1.3rem;
  }
  
  .add-button {
    width: 100%;
    justify-content: center;
  }
}
</style>